<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>广告信息管理</title>
    <script src="http://10.222.29.156:3456/js/jquery-3.2.1.js"></script>
    <link rel="stylesheet" href="http://10.222.29.156:3456/css/bootstrap.css">
    <link rel="stylesheet" href="http://10.222.29.156:3456/css/bootstrap-theme.css">
    <script src="http://10.222.29.156:3456/js/bootstrap.js"></script>
</head>

<body style="font-size: 16px; background-image: url(http://10.222.29.156:3456/images/home10.jpg);">
    <div>
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container-fluid" style="margin-left: 20%; margin-right: 20%;">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
						<span class="sr-only">Toggle navigation</span> <span
							class="icon-bar"></span> <span class="icon-bar"></span> <span
							class="icon-bar"></span>
					</button>
                    <a class="navbar-brand" href="${contextPath }/sec/home">M 系统</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li><a href="${contextPath }/sec/home">首页</a></li>
                        <li><a href="${contextPath }/sec/food">菜品管理</a></li>
                        <li><a href="${contextPath }/sec/order">订单信息</a></li>
                    <li class="active"><a href="${contextPath }/sec/advertisement">广告信息</a></li>
                    <li><a href="${contextPath }/sec/commentary">评论信息</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown"><a href="#" class="dropdown-toggle"
                        data-toggle="dropdown"><span id="username"><img id="userPortrait" width="30px" height="30px" class="img-circle"></img></span><span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu"
                            aria-labelledby="dropdownMenu">
                            <li class="divider"></li>
                            <li><a href="${contextPath }/sec/merchant">详情</a></li>
                            <li><a href="${contextPath }/sec/exit.action">
                            退出</a></li>
                        </ul></li>
                </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
    </div>
    <br>
    <br>
    <br>
    <br>
    <div class="container">
        <div class="well center-block">
            <div class="panel panel-success">
                <div class="panel-heading" align="center">
                    <h4>所有广告</h4>
                </div>
                <div class="panel-body" style=" height:650px; overflow:auto;word-break: break-all;word-wrap: break-word;">
                    <table class="table table-bordered table table-striped" id="advertisementTable" >
                    <tr align="center">
                        <td>菜品图片</td>
                        <td>菜品名称</td>
                        <td>菜品价格</td>
                        <td>菜品类型</td>
                        <td>广告价格</td>
                        <td>回执状态</td>
                    </tr>
                    </table>
                </div>
            </div>
        </div>
        
    </div> 

    <script>
        $(function(){
            $.ajax({
                url: "/o2o-merchant/sec/rest/merchant",
                type: "get"
            }).done(function (msg) {
                $("#userPortrait").attr("src",msg.portrait);
            });
            function sortByStatus(data){
                    function compare(propertyName) { 
                        return function (object1, object2) { 
                            var value1 = object1[propertyName]; 
                            var value2 = object2[propertyName]; 
                            if (value2 < value1) { 
                                return -1; 
                            } 
                            else if (value2 > value1) { 
                                return 1; 
                            } 
                            else { 
                                return 0; 
                            } 
                        } 
                    }

                    data.sort(compare("advertisementStatus"));  
                }

            $.ajax({
                url:"/o2o-merchant/sec/rest/advertisement",
                type:"get"
            }).done(function(msg){
                sortByStatus(msg);
                var advertisementTr='<tr align="center" vertical-align:middle;"><td id="foodImage"><img id="advertisementPrice" alt="图片找不到" width="40px" height="40px" class="img-circle"></img></td><td id="foodName" style="text-align:center; vertical-align:middle;"></td><td id="foodPrice" style="text-align:center; vertical-align:middle;"></td><td id="foodType" style="text-align:center; vertical-align:middle;"></td><td id="advertisementPrice" style="text-align:center; vertical-align:middle;"></td><td id="advertisementStatus" style="text-align:center; vertical-align:middle;"></td></tr>'
                msg.forEach(function(element) {
                    let advertisementTr1=$(advertisementTr);
                    advertisementTr1.find("#foodName").text(element.food.name);
                    advertisementTr1.find("#foodPrice").text(element.food.price);
                    advertisementTr1.find("#foodType").text(element.food.foodType.typeName);
                    advertisementTr1.find("#foodImage").children().attr("src",element.food.image);
                    advertisementTr1.find("#advertisementPrice").text(element.compPrice);
                    if(element.advertisementStatus=="OFF"){
                        advertisementTr1.find("#advertisementStatus").addClass("muted");
                        advertisementTr1.find("#advertisementStatus").text("等待审核");
                    }else{
                        advertisementTr1.find("#advertisementStatus").addClass("text-success");
                        advertisementTr1.find("#advertisementStatus").text("审核通过");
                    }
                    $("#advertisementTable").append(advertisementTr1);
                });
            });
            
        })
     
    </script>

</body>

</html>